<template>
  <div class="account-login-settings">
    <div class="account-login-settings-title">
      <div class="account-login-settings-title-text">{{ $t('setting.enterprise.accountLoginSettingsText1') }}</div>
      <div class="account-login-settings-title-tip">{{  $t('setting.enterprise.accountLoginSettingsText2') }}</div>
    </div>

    <div class="account-login-settings-content">
      <div class="account-login-settings-content-item">
        <div class="account-login-settings-content-item-row1">{{ $t('setting.enterprise.accountLoginSettingsText3') }}</div>
        <div class="account-login-settings-content-item-row2">
          <span>{{ $t('setting.enterprise.accountLoginSettingsText4') }}</span>
        </div>
        <el-button
          type='plain'
          @click="handleEditSSO"
        >{{ $t('setting.enterprise.accountLoginSettingsText5') }}</el-button>
      </div>

      <div class="account-login-settings-content-item">
        <div class="account-login-settings-content-item-row1">{{ $t('setting.enterprise.accountLoginSettingsText6')}}</div>
        <div class="account-login-settings-content-item-row2">
          <span>{{ $t('setting.enterprise.accountLoginSettingsText7') }}</span>
        </div>
        <div class="account-login-settings-content-item-row3">
          <el-button
            type='plain'
            class="mar-r-12"
            @click="handleEditFeishu"
          >{{ $t('setting.enterprise.accountLoginSettingsText5') }}</el-button>
          <el-button
            v-if="larkMyselfConfig.appId.length>0"
            type='primary'
            @click="handleSyncAddressBook"
            :loading="syncLoading"
          >{{ $t('setting.enterprise.accountLoginSettingsText8') }}</el-button>
        </div>

      </div>
    </div>

    <FeishuSelfBuiltDialog
      ref="FeishuSelfBuiltDialogRef"
      @submitLoginInfo="handleSubmitLogin"
    />

    <SSOAccountDialog
      ref="SSOAccountDialogRef"
      @submitLoginInfo="handleSubmitLogin"
    />
  </div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue';
/** utils */
import { toast } from '@src/util/platform';
import { isEmpty } from 'pub-bbx-utils';

/** components */
import FeishuSelfBuiltDialog from '@src/modules/setting/common/enterprise/components/FeishuSelfBuiltDialog.vue';
import SSOAccountDialog from '@src/modules/setting/common/enterprise/components/SSOAccountDialog.vue';

/** api */
import { getLoginConfig, saveSsoLoginConfig, saveLarkMyselfLoginConfig, syncAddressBook } from '@src/modules/setting/common/enterprise/api/index.js';
import i18n from '@src/locales';

export default defineComponent({
  name: 'AccountLoginSettings',
  components: {
    FeishuSelfBuiltDialog,
    SSOAccountDialog,
  },
  props: {
    globalSettingParam: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    const FeishuSelfBuiltDialogRef = ref();
    const SSOAccountDialogRef = ref();

    const ssoConfig = ref({});
    const larkMyselfConfig = ref({
      appId: '',
      appSecret: '',
    });

    const syncLoading = ref(false);

    // 获取登录配置
    const fetchLoginConfig = async () => {
      try {
        const res = await getLoginConfig();

        const { success, message, data } = res || {};
        if (!success) return toast(message, 'error');

        ssoConfig.value = data?.ssoConfig || {};
        larkMyselfConfig.value = data?.larkMyselfConfig || { appId: '', appSecret: '' };
      } catch (err) {
        console.log('err=>', err);
      }
    };

    const checkDomain = () => {
      return isEmpty(props.globalSettingParam?.domainNameAddress);
    };

    const handleEditSSO = () => {
      if (checkDomain()) return toast(i18n.t('setting.enterprise.accountLoginSettingsText9'), 'warning');
      SSOAccountDialogRef.value.openDialog(ssoConfig.value);
    };

    const handleEditFeishu = () => {
      if (checkDomain()) return toast(i18n.t('setting.enterprise.accountLoginSettingsText9'), 'warning');
      FeishuSelfBuiltDialogRef.value.openDialog(larkMyselfConfig.value);
    };

    const handleSubmitLogin = ({ params, type, callBack }) => {
      try {
        const url = {
          sso: saveSsoLoginConfig,
          feiShu: saveLarkMyselfLoginConfig,
        };
        url[type]({ ...params }).then(res => {
          const { success, message, data } = res || {};
          if (!success) return toast(message, 'error');

          fetchLoginConfig();
          callBack();
        });
      } catch (err) {
        console.log('handleSubmitLogin => ', err);
      }
    };

    const handleSyncAddressBook = () => {
      syncLoading.value = true;
      syncAddressBook()
        .then(res => {
          const { success, message, data } = res || {};
          if (!success) return toast(message, 'error');

          toast(message, 'success');
        })
        .finally(() => {
          syncLoading.value = false;
        });
    };

    onMounted(() => {
      fetchLoginConfig();
    });

    return {
      FeishuSelfBuiltDialogRef,
      SSOAccountDialogRef,

      ssoConfig,
      larkMyselfConfig,

      syncLoading,

      handleEditSSO,
      handleEditFeishu,
      handleSubmitLogin,
      handleSyncAddressBook,
    };
  },
});
</script>
<style lang="scss" scoped>
.account-login-settings {
  width: 100%;
  background-color: #fff;
  margin-top: 12px;
  border-radius: 4px;
  &-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e7ed;
    padding: 12px 16px;
    &-text {
      color: #262626;
      font-weight: 500;
      font-size: 18px;
    }
    &-tip {
      font-size: 14px;
      color: #8c8c8c;
      margin-left: 8px;
    }
  }
  &-content {
    padding: 16px;
    &-item {
      padding: 16px;
      background-color: #f5f8fa;
      border-radius: 8px;
      margin-bottom: 16px;
      &-row1 {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
      }
      &-row2 {
        color: #8c8c8c;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 20px;
        .help-doc {
          cursor: pointer;
          color: $color-primary;
        }
      }
      &-row3 {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
